import React, { useState } from 'react';
import { Outlet, Link } from "react-router-dom";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
  SnippetsOutlined,
  AreaChartOutlined,
  RadarChartOutlined,
  BankOutlined
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { SubMenu } = Menu;

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];


// const items: MenuItem[] = [
//   getItem('首页', '1', <PieChartOutlined />, , '/',),
//   // getItem('Option 2', '2', <DesktopOutlined />),
//   getItem('任务管理', 'sub1', <UserOutlined />, [
//     getItem('我负责的任务', '2' , '/my'),
//     getItem('我参与的任务', '3' , '/home/participate'),
//     getItem('我创建的任务', '4' , '/home/create'),
//     getItem('已归档任务', '5' , '/home/archive'),
//   ]),
//   getItem('项目管理', 'sub2', <TeamOutlined />, [
//     getItem('投标管理', '6' , '/project/bidding'),
//     getItem('项目管理', '7' , '/project/management')
//   ]),
//   getItem('合同管理', 'sub3', <DesktopOutlined />, [
//     getItem('材料采购任务', '8', '/contract/material'),
//     getItem('施工班组合同', '9' , '/contract/team'),
//     getItem('项目合同', '10' , '/contract/project'),
//     getItem('常规合同', '11' , '/contract/common'),
//   ]),
//   getItem('审批管理', 'sub4', <FileOutlined />, [
//     getItem('我发起的审批', '12' , '/approval/created_by_me'),
//     getItem('我经办的审批', '13' , '/approval/in_progress'),
//     getItem('抄送给我的审批', '14' , '/approval/copy_to_me'),
//   ]),
//   getItem('招采管理', 'sub5', <SnippetsOutlined />, [
//     getItem('供应商管理', '15' , '/procurement/supplier'),
//     getItem('施工班组管理', '16', '/procurement/team'),
//     getItem('采购计划管理', '17' , '/procurement/plan')
//   ]),
//   getItem('人事行政管理', 'sub6', <RadarChartOutlined />, [
//     getItem('通知公告', '18' , '/announcement'),
//     getItem('招聘市场', '19', , , '/hr/recruitment')
//   ]),
//   getItem('财务管理', 'sub7', <AreaChartOutlined />, [
//     getItem('台账管理', '20', '/finance/accounts'),
//     getItem('付款记录', '21', '/finance/payment_records'),
//     getItem('收款记录', '22', '/finance/receipt_records')
//   ]),
//   getItem('组织管理', 'sub8', <BankOutlined />, [
//     getItem('部门管理', '23', , , '/organization/department'),
//     getItem('岗位管理', '24', , , '/organization/position'),
//     getItem('员工管理', '25', , , '/organization/employee')
//   ]),
//   // getItem('Files', '9', <FileOutlined />),
// ];


const menuList = [
  {
    key:1,
    path:'/',
    label:'首页',
    icon:<PieChartOutlined />
  },
  {
    key:2,
    path:'',
    label:'任务管理',
    icon: <UserOutlined />,
    children:[
      {
        key:3,
        path:'',
        label:'我负责的任务',
      },
      {
        key:4,
        path:'',
        label:'我参与的任务',
      },
      {
        key:5,
        path:'',
        label:'我创建的任务',
      },
      {
        key:6,
        path:'',
        label:'已归档的任务',
      },
    ]
  },
  {
    key:7,
    path:'',
    label:'项目管理',
    icon: <TeamOutlined />,
    children:[
      {
        key:8,
        path:'',
        label:'投标管理',
      },
      {
        key:9,
        path:'',
        label:'项目管理',
      },
    ]
  },
  {
    key:10,
    path:'',
    label:'合同管理',
    icon: <DesktopOutlined />,
    children:[
      {
        key:11,
        path:'',
        label:'材料采购任务',
      },
      {
        key:12,
        path:'',
        label:'施工班组合同',
      },
      {
        key:13,
        path:'',
        label:'项目合同',
      },
      {
        key:14,
        path:'',
        label:'常规合同',
      },
    ]
  },
  {
    key:15,
    path:'',
    label:'审批管理',
    icon: <FileOutlined />,
    children:[
      {
        key:16,
        path:'',
        label:'我发起的审批',
      },
      {
        key:17,
        path:'',
        label:'我经办的审批',
      },
      {
        key:18,
        path:'',
        label:'抄送给我的审批',
      },
    ]
  },
  {
    key:19,
    path:'',
    label:'招采管理',
    icon: <SnippetsOutlined />,
    children:[
      {
        key:20,
        path:'/recruit',
        label:'供应商管理',
      },
      {
        key:21,
        path:'',
        label:'施工班组管理',
      },
      {
        key:22,
        path:'',
        label:'采购计划管理',
      },
    ]
  },
  {
    key:23,
    path:'',
    label:'人事行政管理',
    icon: <RadarChartOutlined />,
    children:[
      {
        key:24,
        path:'/announcement',
        label:'通知公告',
      },
      {
        key:25,
        path:'',
        label:'招聘市场',
      },
    ]
  },
]
const home: React.FC = () => {

  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const renderMenu = (menuList: any[]): React.ReactNode[] =>
  menuList.map((item) =>
    item.children ? (
      <SubMenu key={item.key} icon={item.icon} title={item.label}>
        {renderMenu(item.children)}
      </SubMenu>
    ) : (
      <Menu.Item key={item.key} icon={item.icon}>
        <Link to={"/home"+item.path}>{item.label}</Link>
      </Menu.Item>
    )
  );

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline"   >
          {renderMenu(items)}
        </Menu>
      </Sider> */}
        <Sider
        breakpoint="lg"
        collapsedWidth="0"
        style={{ minHeight: '100vh' }}
        onBreakpoint={(broken) => {
          console.log(broken);
        }}
        onCollapse={(collapsed, type) => {
          console.log(collapsed, type);
        }}
      >
        <div className="demo-logo-vertical" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline"   >
          {renderMenu(menuList)}
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} />
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>建筑施工BPM管理系统 ©2023 </Footer>
      </Layout>
    </Layout>
  );

}

export default home